import _mergeJSXProps2 from '@vue/babel-helper-vue-jsx-merge-props'
import _mergeJSXProps from '@vue/babel-helper-vue-jsx-merge-props'
import _extends from '@babel/runtime/helpers/esm/extends'
// Utils
import { createNamespace } from '../utils'
import { inherit, emit } from '../utils/functional'
import { preventDefault } from '../utils/dom/event' // Components
import './style'
import Field from '../field' // Types

var _createNamespace = createNamespace('search')
var createComponent = _createNamespace[0]
var bem = _createNamespace[1]
var t = _createNamespace[2]

function Search(h, props, slots, ctx) {
  function Label() {
    if (slots.label || props.label) {
      return h(
        'div',
        {
          class: bem('label')
        },
        [slots.label ? slots.label() : props.label]
      )
    }
  }

  function Action() {
    if (!props.showAction) {
      return
    }

    function onCancel() {
      if (slots.action) {
        return
      }

      emit(ctx, 'input', '')
      emit(ctx, 'cancel')
    }

    return h(
      'div',
      {
        class: bem('action'),
        attrs: {
          role: 'button',
          tabindex: '0'
        },
        on: {
          click: onCancel
        }
      },
      [slots.action ? slots.action() : props.actionText || t('cancel')]
    )
  }

  var fieldData = {
    attrs: ctx.data.attrs,
    on: _extends({}, ctx.listeners, {
      keypress: function keypress(event) {
        // press enter
        if (event.keyCode === 13) {
          preventDefault(event)
          emit(ctx, 'search', props.value)
        }

        emit(ctx, 'keypress', event)
      }
    })
  }
  var inheritData = inherit(ctx)
  inheritData.attrs = undefined
  return h(
    'div',
    _mergeJSXProps2([
      {
        class: bem({
          'show-action': props.showAction
        }),
        style: {
          background: props.background
        }
      },
      inheritData
    ]),
    [
      slots.left == null ? void 0 : slots.left(),
      h(
        'div',
        {
          class: bem('content', props.shape)
        },
        [
          Label(),
          h(
            Field,
            _mergeJSXProps([
              {
                attrs: {
                  type: 'search',
                  border: false,
                  value: props.value,
                  leftIcon: props.leftIcon,
                  rightIcon: props.rightIcon,
                  clearable: props.clearable,
                  clearTrigger: props.clearTrigger
                },
                scopedSlots: {
                  'left-icon': slots['left-icon'],
                  'right-icon': slots['right-icon']
                }
              },
              fieldData
            ])
          )
        ]
      ),
      Action()
    ]
  )
}

Search.props = {
  value: String,
  label: String,
  rightIcon: String,
  actionText: String,
  background: String,
  showAction: Boolean,
  clearTrigger: String,
  shape: {
    type: String,
    default: 'square'
  },
  clearable: {
    type: Boolean,
    default: true
  },
  leftIcon: {
    type: String,
    default: 'search'
  }
}
export default createComponent(Search)
